<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div id="mainMap" style="height:500px"></div>

	<script src="echarts.js"></script>	
	<script type="text/javascript">
	var fsMapUrl = 'json/fsdecode.json';
	var infoJson = {
	    chancheng : [
	        {
	            townName : '禅城城区',
	            companyName : '佛山市劲能电力工程有限公司',
	            contact : [
	                {name : '任小姐',phone: '0757-83933510'}
	            ],
	        },
	        {
	            townName : '南庄',
	            companyName : '广东创辉电力工程有限公司',
	            contact : [
	                {name : '李先生',phone: '13068659640'},
	                {name : '陆先生',phone: '13702993654'}
	            ],
	        }
	    ],
	    sanshui : [
	        {
	            townName : '西南、白坭',
	            companyName : '广东威顺电力工程有限公司',
	            contact : [
	                {name : '李小姐',phone: '0757-82573248'}
	            ],
	        },
	        {
	            townName : '乐平',
	            companyName : '佛山市三水众诚电力工程安装有限公司',
	            contact : [
	                {name : '梁小姐',phone: '0757-82573306'}
	            ],
	        },
	        {
	            townName : '大塘、南山、芦苞',
	            companyName : '佛山市三水恒通电力工程安装有限公司',
	            contact : [
	                {name : '张先生',phone: '0757-82573487'}
	            ],
	        }
	    ],
	    gaoming : [
	        {
	            townName : '荷城、明城、更合、杨和',
	            companyName : '佛山市高明立信发展有限公司',
	            contact : [
	                {name : '黄先生',phone: '0757-82575012 / 13927236954'}
	            ],
	        }
	    ],
	    shunde : [
	        {
	            townName : '大良',
	            companyName : '广东弘光电力工程有限公司',
	            contact : [
	                {name : '黄先生',phone: '0757-82575012 / 13927236954'}
	            ],
	        },
	        {
	            townName : '容桂',
	            companyName : '佛山市顺德区易达电力工程有限公司',
	            contact : [
	                {name : '方先生',phone: '0757-28386166 / 13825500180'}
	            ],
	        },
	        {
	            townName : '龙江、乐从',
	            companyName : '佛山市顺德区威泰电力工程有限公司',
	            contact : [
	                {name : '邓先生',phone: '0757-29237809 / 13702822925'}
	            ],
	        },
	        {
	            townName : '北滘、陈村',
	            companyName : '广东圣辉电力工程有限公司',
	            contact : [
	                {name : '王先生',phone: '0757-23272125'}
	            ],
	        },
	        {
	            townName : '勒流、伦教',
	            companyName : '佛山市顺德恒辉电力工程有限公司',
	            contact : [
	                {name : '戴先生',phone: '13929101200'}
	            ],
	        },
	        {
	            townName : '杏坛、均安',
	            companyName : '佛山市顺德区合辉电力工程有限公司',
	            contact : [
	                {name : '杨先生',phone: '0757-27383796'}
	            ],
	        },
	    ],
	    nanhai : [
	       {
	            townName : '桂城',
	            companyName : '广东怡信电力工程有限公司',
	            contact : [
	                {name : '叶先生',phone: '0757-82574051'}
	            ],
	        },
	        {
	            townName : '里水、和顺',
	            companyName : '广东欧姆龙电力工程有限公司',
	            contact : [
	                {name : '黄先生',phone: '0757-83663123 / 13928606164'}
	            ],
	        },
	        {
	            townName : '大沥、盐步、黄岐',
	            companyName : '佛山市南海飞宇电力电器安装有限公司',
	            contact : [
	                {name : '何先生',phone: '13927766901'}
	            ],
	        },
	        {
	            townName : '松岗、官窖',
	            companyName : '广东裕基电力建设工程有限公司',
	            contact : [
	                {name : '李先生',phone: '0757-82577616 / 13925997083'}
	            ],
	        },
	        {
	            townName : '罗村、丹灶、金沙',
	            companyName : '佛山市南海多宝电力电器安装有限公司',
	            contact : [
	                {name : '杨先生',phone: '0757-83669502'}
	            ],
	        },
	        {
	            townName : '狮山、小塘',
	            companyName : '佛山市景胜电力电器安装有限公司',
	            contact : [
	                {name : '王先生',phone: '0757-82577941 / 13630014102'}
	            ],
	        },
	        {
	            townName : '西樵、九江',
	            companyName : '佛山市南海华林电力电器安装有限公司',
	            contact : [
	                {name : '刘先生',phone: '13928627517'}
	            ],
	        }
	    ]
	}	
	
	// 为模块加载器配置echarts的路径，从当前页面链接到echarts.js
	require.config({
	    paths: {
	        echarts: 'js'
	    }
	});
	
	//动态加载echarts然后在回调函数中开始使用
	require(
	    [
	        'echarts',
	        'echarts/chart/map'
	    ],
	    function (ec) {
	        require('echarts/util/mapData/params').params.Foshan = {
	            getGeoJson: function (callback) {
	                $.getJSON(fsMapUrl,callback);
	            }
	        }
	        // --- 地图 ---
	        var myChart2 = ec.init(document.getElementById('mainMap'));

	        myChart2.setOption({
	            title : {
	                text : '', //可设主标题
	                subtext: ''//可设副标题
	            },
	            tooltip : {
	                trigger: 'item',
	                showDelay: 0,
	                transitionDuration: 0.2,
	                formatter: function (params,ticket,callback) {
	                    var name = params.data.name,
	                        list = params.data.list,
	                        res = '';

	                    //渲染镇街
	                    $.each(list,function(index, el) {
	                        var content = el, contactItem = '';
	                        //渲染联系人
	                        $.each(content.contact,function(k, v) {
	                            var div = [
	                                '<div class="contact-item">',
	                                '<span class="r"><i class="fa fa-user"></i>'+v.name+'</span>',
	                                '<span><i class="fa fa-comments"></i>'+v.phone+'</span>',
	                                '</div>'
	                            ].join('');
	                            contactItem += div;
	                        });
	                            
	                        var resTemp = [                               
	                            
                                '<tr>',
                                    '<td class="n border"><i class="fa fa-map-marker"></i>'+content.townName+'</td>',
                                    '<td class="c border"><i class="fa fa-location-arrow"></i>'+content.companyName+'</td>',
                                '</tr>',
                                '<tr>',
                                	'<td></td>',
                                    '<td class="contact-info">'+contactItem+'</td>',
                                '</tr>'
	                                                           
	                        ].join('');
	                        
	                        res += resTemp;
	                    });
	                    
	                    res = [
	                        '<div class="map-tooltips">',
	                            '<h1>'+name+': </h1>',
	                            '<table>'+ res+'</table>',
	                        '</div>'
	                    ].join('');

	                    return res;
	                    
	                    /*setTimeout(function (){
	                        // 仅为了模拟异步回调
	                        callback(ticket, res);
	                    }, 500)
	                    return 'loading';*/
	                }
	            },
	            /*dataRange: { //热图
	                min: 1,
	                max: 15,
	                text:['High','Low'],
	                realtime: false,
	                calculable : true,
	                color: ['orangered','yellow','lightskyblue']
	            }, */            
	            series : [
	                {
	                    type: 'map',
	                    mapType: 'Foshan',
	                    itemStyle:{
	                        normal:{
	                        	label:{show:true},
	                        	borderColor : '#fff',
	                        	borderWidth : 3
	                        },
	                        emphasis:{
	                        	label:{show:true},
	                        	borderColor : '#fff',
	                        	borderWidth : 3
	                        },
	                    },
	                    data:[
	                        {name: '禅城区', value: infoJson.chancheng.length, list : infoJson.chancheng,
	                         	itemStyle: {normal: {color: 'rgb(214,101,31)', label: {textStyle:{color: '#fff'}}}}
	                         },
	                        {name: '高明区', value: infoJson.gaoming.length, list : infoJson.gaoming, 
	                        	itemStyle: {normal: {color: 'rgb(0,114,115)', label: {textStyle:{color: '#fff'}}}}
	                    	},
	                        {name: '三水区', value: infoJson.sanshui.length, list : infoJson.sanshui, 
	                        	itemStyle: {normal: {color: 'rgb(115,157,27)', label: {textStyle:{color: '#fff'}}}}
	                    	},
	                        {name: '南海区', value: infoJson.nanhai.length, list : infoJson.nanhai, 
	                        	itemStyle: {normal: {color: 'rgb(230,174,19)', label: {textStyle:{color: '#fff'}}}}
	                    	},
	                        {name: '顺德区', value: infoJson.shunde.length, list : infoJson.shunde,
	                        	itemStyle: {normal: {color: 'rgb(139,0,89)', label: {textStyle:{color: '#fff'}}}}
	                    	}
	                    ],
	                    // 文本位置修正
	                    textFixed : {
	                        '三水区' : [20, -60],
	                        '南海区' : [-30, -50],
	                        '禅城区' : [-15, 5],
	                        '顺德区' : [-40, -50],
	                        '高明区' : [-80, 50]
	                    },
	                    //缩放控制
	                    roam : true
	                }
	            ]
	        });
	    }
	);
	</script>
</body>
</html>